<template>
	<transition name='slide-up'>
		<div class="setting-wrapper"
				 v-show='menuVisible && settingVisible === 2'>
			<div class="setting-progress">
				<div class="read-time-wrapper">
					<span class="read-time-text">{{getReadTimeText()}}</span>
					<span class="icon-forward"></span>
				</div>
				<div class="progress-wrapper">
					<div class="progress-icon-wrapper" @click="prevSection()">
						<span class="icon-back"></span>
					</div>
					<input class="progress" type="range"
								 @change="onProgressChange($event.target.value)"
								 @input="onProgressInput($event.target.value)"
								 :value="progress"
								 :disabled="!bookAvailable"
								 ref="progress">
					<div class="progress-icon-wrapper" @click="nextSection()">
						<span class="icon-forward"></span>
					</div>
				</div>
				<div class="text-wrapper">
					<span class="progress-section-text">{{getSectionName}}</span>
					<span>({{bookAvailable ? progress + '%' : '加载中...'}})</span>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	import { ebookMixin } from 'utils/mixin'

	export default {
		name: "EbookSetProgress",
		mixins: [ebookMixin],
		methods: {
			onProgressChange(progress) {
				this.setProgress(progress).then(() => {
					this.displayProgress()
					this.updateProgressBg()
				})
			},
			onProgressInput(progress) {
				this.setProgress(progress).then(() => {
					this.updateProgressBg()
				})
			},
			prevSection() {
				if (this.section > 0 && this.bookAvailable) {
					this.setSection(this.section -1).then(() => {
						this.displaySection()
					})
				}
			},
			nextSection() {
				if (this.section < this.currentBook.spine.length - 1 && this.bookAvailable) {
					this.setSection(this.section + 1).then(() => {
						this.displaySection()
					})
				}
			},
			displaySection() {
				const sectionInfo = this.currentBook.section(this.section)
				if (sectionInfo && sectionInfo.href) {
					this.display(sectionInfo.href)
				}
			},
			displayProgress() {
				const cfi = this.currentBook.locations.cfiFromPercentage(this.progress / 100)
				this.display(cfi)
			},
			updateProgressBg() {
				this.$refs.progress.style.backgroundSize = `${this.progress}%  100%`
			},
		},
		updated() {
			this.updateProgressBg()
		}
	}
</script>

<style lang='scss' scoped>
@import 'assets/styles/global';

.menu-bar {
	.setting-wrapper {
		position: absolute;
		bottom: px2rem(44);
		z-index: 151;
		left: 0;
		width: 100%;
		height: px2rem(90);
		background: white;
		box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, .15);
		.setting-progress {
			position: relative;
			width: 100%;
			height: 100%;
			.read-time-wrapper {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: px2rem(40);
				font-size: px2rem(12);
				@include center;
			}
			.progress-wrapper {
				width: 100%;
				height: 100%;
				@include center;
				padding: 0 px2rem(15);
				box-sizing: border-box;
				.progress-icon-wrapper {
					font-size: px2rem(20);
				}
				.progress {
					width: 100%;
					-webkit-appearance: none;
					height: px2rem(2);
					margin: 0 px2rem(10);
					&:focus {
						outline: none;
					}
					&::-webkit-slider-thumb {
						-webkit-appearance: none;
						height: px2rem(20);
						width: px2rem(20);
						border-radius: 50%;
						background: #ceced0;
						box-shadow: 0 px2rem(4) px2rem(6) 0 rgba(0, 0, 0, .15);
						border: none;
					}
				}
			}
			.text-wrapper {
				position: absolute;
				left: 0;
				bottom: px2rem(10);
				width: 100%;
				color: #333;
				font-size: px2rem(12);
				padding: 0 px2rem(15);
				box-sizing: border-box;
				@include center;
				.progress-section-text {
					@include ellipsis;
				}
			}
		}
	}
}
	
</style>